<template>
  <!-- 引入container头部布局 -->
  <el-container class="home-container">
 <!-- 头部 -->
      <el-header>
            <div>
                <img src="../assets/eoffice.png" alt="">
                <span>移动办公平台 </span>
            </div>
        <el-button type="info" @click="logout()">安全退出</el-button>
    </el-header>
<!-- 主体 -->
<el-container>
 <!-- 侧边栏 收放样式：isCollapse-->
 <el-aside :width="isCollapse?'75px':'200px'">
    <!-- <div class="toggle-Button" @click="togggleColl()">| | |</div> -->
<el-menu  background-color="#4684be"  text-color="#ffff" active-text-color="rgb(231, 234, 18)" :router="true" :collapse="isCollapse" :collapse-transition="false"  :default-active="activePath" >
    <!-- 一级菜单 unique-open:不同时展开主菜单栏 path:数据库中定义的路径-->
    <el-submenu :index="item.menuUrl+''" v-for="item in menuList" :key="item.mid" >
        <template slot="title">
            <i :class="iconsObject[item.mid]"></i>
            <span >{{item.menuDesc}}</span>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item :index="it.menuUrl+''" v-for="it in item.subMenuList" :key="it.parentId"  @click="saveNavState(it.menuUrl)">
            <template slot="title" >
                <i :class="iconsObject[it.id]"></i>
                <span>{{it.menuDesc}}</span>
            </template>
         </el-menu-item>
    </el-submenu>
</el-menu>
</el-aside>  
<!-- 主体内容 datalist页面-->
<el-main><router-view></router-view></el-main>
  </el-container>
  </el-container>
</template>
<script>
export default {
     //相当于onload：在页面加载之前数据已经加载
 
    created(){
        //查询menuList
        this.getMenuList();
        this.activePath = window.sessionStorage.getItem('activePath');//路径与页面同时加载,动态修改activepath //路径记忆功能
    },
    data(){
        return {
            menuList:[],
            isCollapse:false, //控制伸缩（收放）
            iconsObject:{
              '100':'iconfont iconguanliyuan' //小图标
            },
            activePath:'/user/task', //默认路径
            //activePath:'/admin/user/perso', //默认路径
        }
    },
    methods:{
        logout(){
            window.sessionStorage.clear(); //业务逻辑：用户退出，数据应该全部清除
            this.$router.push("/users/login");
        },
        //获取导航菜单
        async getMenuList(){
             var qs = require('qs'); //处理后台接收json数据为空的异常
                //后台经过json转换，方便前端取值
                const {data:res} = await this.$http.post("/menus/queryMenuInfo");
                console.log(res)
                if(res.status == 0){
                //   this.$message.error("获取列表失败......")//访问成功的数据回填
                console.log(res.data.menus)
                    this.menuList = res.data.menus;
                }else{
                alert("获取列表失败......")
                }

        },
        togggleColl(){//控制伸缩
            this.isCollapse = !this.isCollapse;
            
        },
        saveNavState(activePath){//保存路径
            window.sessionStorage.setItem('activePath',activePath);//将路径保存到session中
            this.activePath = activePath;
        }
    }
};
</script>
<style lang="less" scoped>
    .home-container {//布局其样式
    height: 100%;
  }
  .el-header{//头部样式
       background-color: #4684be;
       align-items: center;
       display: flex;
       justify-content: space-between;//贴边方式：两边对齐
       padding-left: 0%;//左边界
       color: #FFFFFF;
       font-size: 25px;
       font-family: Georgia, 'Times New Roman', Times, serif;
       display: flex;//内容排列
       align-items: center;//内容排列
      >div{
           display: flex;
           align-items: center;
           span{
           margin: 16px 0px 0px 8px;
       }
       }
  }

 .el-aside{//侧边栏样式
    background-color: #4684be;
    .el-menu{border-right: none;}
     cursor: pointer;
     text-align: left;
 }
 .el-main{//主体样式
     background-color: #E9EEF3;
     border-right: none;
 }
 img{
     width: 55px;
     height: 55px;
     border-radius: 25%;
     margin-left: 18px;
     margin-top: 6px;
 }
 // 按钮样式
//  .toggle-Button{
//    background-color: #4a5064;
//    font-size: 10px;
//    line-height: 24px;
//    color:#ffff;
//    text-align: center;
//    letter-spacing: 0.2em;
//    cursor: pointer;
//  }
</style>